<template>
	<view class="goods">
		<view class='list'>
			<view class='f-c-sb title'>
				<view class='title_text'>优惠券类型</view>
			</view>
			<view class="f-c-sb tag">
				<view 
					class="tabTag"
					v-for="(item, index) in type" 
					:key="index"
					:class="item.id == selType?'active':''"
					@click="selectType(item.id)"
				>{{item.name}}</view>
			</view>
		</view>
		<view class='goodsList'>
			<u-search @search='seek' @blur='seek' placeholder="请输入优惠券名称" v-model="keywork" bg-color='#fff' :show-action='false'></u-search>
			<view class='coupon f-c-sb' v-for='(item,index) in goodsList' :key='item.gsId'>
				<view>
					<view class='name'>商品名称：{{item.name}}</view>
					<view class='f-c-sb'>
						<view>面额：<text style='color:#177fff;font-size:28rpx;font-weight: 900;'>{{item.money}}</text></view>
						<view>优惠券类型：{{item.typeStr}}</view>
					</view>
					<view>使用条件：满{{item.conditionMoney}}/元可以使用</view>
				</view>
				<u-radio-group v-model="coupon" shape='square'>
					<u-radio @change="radioChange" :name="item.id"></u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class='submitBtn' @click='back'>确定</view>
	</view>
</template>

<script>
	import { findCoupon } from '@/api/index.js';
	import { mapGetters, mapMutations } from 'vuex';

  export default {
	  name:'sel_coupons',
		data() {
			return{
				coupon:'',
				selType:"1",
				type:[
					{
						id:1,
						name:'钣喷满减'
					},
					{
						id:2,
						name:'洗车满减'
					},
					{
						id:3,
						name:'保养满减'
					},
					{
						id:4,
						name:'商城满减'
					},
					{
						id:5,
						name:'美容满减'
					},
					{
						id:6,
						name:'购车满减'
					},
				],
				pageNo:'1',
				pageSize:'10',
				storeId:'',
				goodsList:[],
			}
		},
		computed: {
		  ...mapGetters(['userInfo'])
		},
		onLoad(options){
			this.pagelist = options.index;
			this.storeId = this.userInfo.storeBasicId;
		},
		onShow() {
			this.getfindCoupon()
		},
		methods: {
			getfindCoupon(){
				findCoupon({
					couponName:this.keywork,
					couponType:this.selType,
					storeId:this.storeId,
					pageNo:this.pageNo,
					pageSize:this.pageSize,
				}).then(res => {
					res.data.forEach( (item,index) => {
						res.data[index].checked = false
					})
					this.goodsList = this.goodsList.concat(res.data);
				})
			},
			selectType(id){
				this.selType = id;
				this.goodsList = [];
				this.pageNo = 1;
				this.getfindCoupon()
			},
			seek(){
				this.goodsList = [];
				this.pageNo = 1;
				this.getfindCoupon()
			},
			radioChange(e){
				this.coupon = e;
			},
			back(){
				if(!this.coupon){
					uni.showToast({
						title:'请至少选择一张优惠券',
						icon:'none',
					})
					return
				}
				uni.$emit('setCardData',{
					coupon:this.goodsList.filter(item => item.id == this.coupon),
					pagelist:this.pagelist
				})
				uni.navigateBack({
					delta: 1
				});
			}
		},
		onReachBottom(e){
			this.pageNo = Number(this.pageNo) + 1;
			this.getfindCoupon()
		}
	}
</script>

<style lang="less">
	.list{
		background-color: #fff;
		padding:13rpx 40rpx;
		margin:13rpx 22rpx;
		.title{
			font-size: 24rpx;
			line-height: 90rpx;
			.title_text{
				position: relative;
			}
			.title_text:after{
				position: absolute;
				width: 8rpx;
				top:30rpx;
				height: 32rpx;
				content: "";
				left: -20rpx;
				border-radius: 20rpx;
				background-color: #007FFF;
			}
		}
		.tag{
			padding:20rpx 0;
			border-bottom: 1px solid #efefef;
			flex-wrap: wrap;
			.tabTag{
				width: 180rpx;
				height: 70rpx;
				background-color: #d3d3d3;
				color:#fff;
				text-align: center;
				line-height: 70rpx;
				margin-bottom: 20rpx;
				border-radius: 5rpx;
			}
			.active{
				background-color: #177fff;
			}
		}
	}
	.goodsList{
		padding:13rpx 40rpx;
		.coupon{
			background-color: #fff;
			padding:20rpx;
			line-height: 60rpx;
			margin-top:20rpx;
			border-radius: 20rpx;
			color:#C0C4CB;
			>view:first-child{
				flex:1;
				margin-right:100rpx;
			}
			.name{
				font-size:34rpx;
				color:#333;
			}
		}
	}
.submitBtn{
	width: 710rpx;
	height: 100rpx;
	background: #177fff;
	border-radius: 13rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	line-height: 100rpx;
	margin: 20rpx auto;
}
</style>
